<template>
  <div class="about">
    <!-- 关于 -->
    <a-button type="primary" @click="showModal">打开弹窗</a-button>
    <a-modal v-model:visible="visible" title="弹窗" @ok="handleOk">
      <p>提示</p>
      <div>内容</div>
    </a-modal>

    <hr>

    <button @click="foo1" style="font-size: 22px; margin: 10px;">点击显示弹窗1</button>
    <button @click="foo2" style="font-size: 22px; margin: 10px;">点击显示弹窗2</button>
    <my-toast :msg="message" v-if="visiable" @my-send="recv"></my-toast>


  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { message } from 'ant-design-vue';
import MyToast from '../components/MyToast.vue'

export default defineComponent({
  components:{ MyToast },
  setup() {

    // 提示框
    // message.info('友好提示1');
    // message.error('友好提示2');
    // message.success('友好提示3');

    // 对话框
    const visible = ref<boolean>(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = (e: MouseEvent) => {
      console.log(e);
      visible.value = false;
    };




    // 弹窗文本
    let message = ref('')
    let visiable = ref(false)

    const foo1 = () => {
      message.value = '登录成功.'
      visiable.value = true;//显示弹窗
    }
    const foo2 = () => {
      message.value = '收藏失败.'
      visiable.value = true;//显示弹窗
    }
    const recv = (isShow: boolean) => {
      visiable.value = isShow;
    }

    return {
      visible,
      showModal,
      handleOk,
      
      message,
      foo1,
      foo2,
      visiable,
      recv,

      
    };
  },
});
</script>
